<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面性能测试工具</title>
    <link rel="stylesheet" href="../../bootstrap/bootstrap.min.css">
</head>

<body>
    <div class="container mt-5">
        <h1 class="mb-4">页面性能测试工具</h1>
        <form>
            <div class="form-group mb-3">
                <label for="iterations">计算圆周率的迭代次数：</label>
                <input type="number" class="form-control" id="iterations" value="10000000" min="1">
            </div>
            <button type="button" class="btn btn-primary" onclick="testPerformance()">测试</button>
        </form>
        <div class="mt-4">
            <p>测试结果：</p>
            <p>响应时间： <span id="responseTime"></span>毫秒。</p>
        </div>
    </div>
    <script>
        function testPerformance() {
            const iterations = parseInt(document.getElementById("iterations").value);

            if (isNaN(iterations)) {
                alert("请输入数字！");
                return;
            }

            let start = performance.now();
            calculatePi(iterations);
            let end = performance.now();
            let responseTime = end - start;

            document.getElementById("responseTime").innerHTML = responseTime.toFixed(2);
        }

        function calculatePi(iterations) {
            let insideCircle = 0;
            for (let i = 0; i < iterations; i++) {
                let x = Math.random();
                let y = Math.random();
                if (x * x + y * y <= 1) {
                    insideCircle++;
                }
            }
            let pi = insideCircle / iterations * 4;
            return pi;
        }
    </script>
</body>

</html>